<template>
  <div class="ant-card-head-title">发起申请</div>
  <div class="card-grid">
    <template v-for="item in items" :key="item">
      <Card>
        <router-link :to="item.link">
          <span class="flex flex-col items-center">
            <Icon :icon="item.icon" :color="item.color" size="20" />
            <span class="text-md mt-2">{{ item.title }}</span>
          </span>
        </router-link>
      </Card>
    </template>
  </div>

</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Card, } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { navItems } from './data';

export default defineComponent({
  components: { Card, CardGrid: Card.Grid, Icon, },
  setup() {
    return { items: navItems };
  },
});
</script>
<style>
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 三列等宽 */
  gap: 0px;
  /* 卡片间距 */
}
</style>
